<template>
  <div class='warp-container'>
    <section class='product-banner-container'>
      <HomeBanner ></HomeBanner>
    </section>
    <section class='home-app-container'>
      <ShowApp viewType='product'></ShowApp>
    </section>
    <section class='home-credible-container'>
<!--      <Credible></Credible>-->
<!--      <DemoSwiper></DemoSwiper>-->
      <EffectSlide></EffectSlide>
    </section>
  </div>
</template>

<script setup lang='ts'>
import {onBeforeMount, onMounted, ref} from 'vue'
import HomeBanner from '../../components/home/Banner.vue'
import home from "../../assets/ts/home/home";
import ShowApp from '@/components/home/ShowApp.vue'
import Credible from '@/components/home/Credible.vue'
import DemoSwiper from '@/components/home/DemoSwiper.vue'
import EffectSlide from '@/components/home/EffectSlide.vue'

const homeBanner = ref(home.homeBannerList);
const hotProductList = ref(home.hotProductList);
const topMenu = ref(home.topMenu)

</script>

<style scoped lang='scss'>
.warp-container {
  width: 100%;
  overflow: hidden;
}
.product-banner-container{
  background-color:white;
  width: 100%;
  height:815px;
  overflow:hidden;

}
.home-intro-container {
  height: 725px;
  width: 100%;
  background-color: white;
}
.home-card-container {
  height: 716px;
  width: 100%;
  position: relative;
}
.home-app-container {
  height: 725px;
  width: 100%;
  overflow: hidden;
}
.home-footer-container{
  height: 221px;
  width: 100%;
  background-color: #000000;
  border-top: 4px solid rgba(255, 29, 29, 1);
}
.home-credible-container{
  height: 550px;
  width: 100%;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
